<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>反馈/建议/举报</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #IndexBackground {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            text-align: center;
            background: rgb(9, 16, 60);
        }
        #bgPic {
            box-shadow: 0 0 8px 7px #ffffff, 0 0 194px 85px #9da4ea;
            position: fixed;
            top: 32%;
            left: 32%;
            margin-top: 0;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: url("bg/moon.jpg");
            transform: rotate(180deg);
            background-size: cover
        }

        #bgcloud {
            height: 100%;
            width: 999999px;
            position: fixed;
            background: url(./bg/cloudsmall.png);
            background-size: contain;
            background-repeat: repeat;
            opacity: .4;
            top: 0;
            animation: bgcloudanim 60000s infinite linear
        }

        @keyframes bgcloudanim {
            0% {
                transform: translateX(-800px)
            }
            99.9999999999% {
                transform: translateX(-999999px)
            }
            100% {
                transform: translateX(0px)
            }
        }

        #main{
            margin: 0 auto;
            width: 640px;
        }
        #captchaBox{
            position: relative;
            top: 70px;
            margin: 0 auto;
            width: 570px;
            padding: 10px;
            height: 380px;
            background: #fcfcfc;
            box-shadow: 0 0 5px gray;
            overflow: hidden;
        }
        .captchaPic{
            float: left;
            margin: 5px;
            border: 1px solid #cacaca;
            width: 130px;
            height: 130px;
            background-size: cover;
            transition: 0.2s;
        }
        .captchaPic:hover{
            transform: scale(1.1);
        }
        #captchaBottom{
            width: 100%;
            clear: both;
        }
        #captchaBtn_confirm{
            margin-left: auto;
            margin-right: auto;
            width: 120px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            background: #3f59ff;
            color:white;
            text-align: center;
            border-radius: 5px;
            border: 1px solid #000;
            box-shadow: 0 0 8px #838383 inset;
            display: none;
            cursor: pointer;
        }

        #captchaBtn_confirm:hover{
            background: #627dff;
        }

        #captchaBtn_stupid{
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
            color: #acacac;
            text-align: center;
        }
        #captchaBtn_stupid span{
            cursor: pointer;
        }
        #infoBox{
            background: rgba(32, 18, 126, 0.6);
            padding: 20px;
            margin-top: 50px;
        }
        #infoBox label{
            color:white;
        }
        #tit{
            width: 595px;
            height: 30px;
            line-height: 30;
        }
        #content{
            width: 595px;
            height: 200px;
            resize: none;
        }
        #contact{
            width: 595px;
            height: 30px;
            line-height: 30;
        }
        #infoSend{
            width: 600px;
            height: 40px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            color:white;
            font-size: 25px;
            line-height: 40px;
            background: rgba(39, 78, 255, 0.81);
        }
        #infoSend:hover{
            background: rgba(39, 78, 255, 1);
        }
        #captchaScreen{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: none;
        }
        .wrongCode{
            animation: wrong 0.2s 1;
        }
        @keyframes wrong {
            0%{}
            20%{transform: translateX(10px)}
            40%{transform: translateX(-10px)}
            60%{transform: translateX(10px)}
            80%{transform: translateX(-10px)}
            100%{transform: translateX(0px)}
        }
        #captchaSuccess{
            display: table-cell;
            width: 600px;
            height:380px;
            background: rgb(246,246,246);
            line-height: 380px;
            transition: 0.4s;
        }
    </style>
</head>
<body>
<div id="IndexBackground">
    <div id="bgPic"></div>
    <div id="bgcloud"></div>
</div>
<div id="main">
    <div id="infoBox">
        <label for="tit">标题</label><input id="tit" type="text" maxlength="32"><br>
        <label for="content">内容</label><textarea id="content" maxlength="255"></textarea><br>
        <label for="contact">您的联系方式</label><input id="contact" type="text" maxlength="16">
        <div id="infoSend" onclick="showCaptcha()">
            发送
        </div>
    </div>
</div>
<div id="captchaScreen" >
    <div id="captchaBox">
        <h3>请点击下面所有的 <span id="starname" style="color:red;font-size: 25px">--</span></h3>
        <br>
        <hr>
        <div class="captchaPic" onclick="codeClick('0',this)"></div>
        <div class="captchaPic" onclick="codeClick('1',this)"></div>
        <div class="captchaPic" onclick="codeClick('2',this)"></div>
        <div class="captchaPic" onclick="codeClick('3',this)"></div>
        <div class="captchaPic" onclick="codeClick('4',this)"></div>
        <div class="captchaPic" onclick="codeClick('5',this)"></div>
        <div class="captchaPic" onclick="codeClick('6',this)"></div>
        <div class="captchaPic" onclick="codeClick('7',this)"></div>
        <div id="captchaBottom">
            <div id="captchaBtn_confirm">确认</div>
            <div id="captchaBtn_stupid"><span onclick="newCaptcha()">我无法识别这批图片</span></div>
        </div>
        <div id="captchaSuccess">
            <img src="captcha/other/no.jpg" style="vertical-align: middle;margin-top: -20px;" id="captchaMsgpic" height="200" width="200"/>
            <span style="font-size:80px;margin-left: 30px;" id="captchaMsg">---</span>
        </div>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
    var wrongCount = 0;
    var captchaCode = ["x"];
    var cgkey = {
        0: 'fanwei,liucixin',
        1: 'jinxing,wangzulan',
        2: 'nanxing,nvxing',
        3: 'hanzi,meizi',
    };
    //汉语拼音要跟文件夹名称相同，汉字可以任意定义
    var starnameKey = {
        'fanwei': "范伟",
        'liucixin': "刘慈欣",
        'jinxing': "金星",
        'wangzulan': "王祖蓝",
        'nanxing':"男性",
        'nvxing':"女性",
        'hanzi':"汉子",
        'meizi':"妹子"
    };
    var cpo = {
        0: [1, 2, 3, 4, 5],
        1: [1, 2, 3, 4, 5],
        2: [1, 2, 3, 4, 5],
        3: [1, 2, 3, 4, 5]
    };

    function newCaptcha() {
        //从cgkey中选一对照组（增加对照组时要改这里 取余对照组数量）
        var cg = Math.floor(Math.random() * 10) % 4;
        var cs = document.getElementsByClassName('captchaPic');
        var cpoindex = [0, 1];
        //打乱数组顺序
        cpo[0] = shuffle(cpo[0]);
        cpo[1] = shuffle(cpo[1]);
        cpo[2] = shuffle(cpo[2]);
        cpo[3] = shuffle(cpo[3]);
        //对照组选出一位
        var cpc = (Math.floor(Math.random() * 10) % 2);
        document.getElementById("starname").innerText = starnameKey[cgkey[cg].split(',')[cpc]];
        captchaCode = [];
        for (var x in cs) {
            if (x === 'length') {
                break
            }
            var cpx = (Math.floor(Math.random() * 10) % 2);
            if (cpoindex[cpx] >= 4) {
                cpoindex[cpx] = 0;
                if (cpx === 1) {
                    cpx = 0
                } else {
                    cpx = 1
                }
            }
            var curl = 'url(captcha/' + cg + '/' + cgkey[cg].split(',')[cpx] + '/' + cpo[cpx][cpoindex[cpx]] + '.jpg)';
            cs[x].style.background = curl;
            cs[x].style.backgroundSize = 'cover';
            if (cpx === cpc) {
                captchaCode.push(x)
            }
            cpoindex[cpx] += 1
        }
        console.log(captchaCode)
    }
    function showCaptcha() {
        document.getElementById('captchaScreen').style.display = 'block';
        newCaptcha()
    }
    function hideCaptcha(){
    	document.getElementById('captchaScreen').style.display = 'none';
    }
    function shuffle(a) {
        var len = a.length;
        for (var i = 0; i < len; i++) {
            var end = len - 1;
            var index = (Math.random() * (end + 1)) >> 0;
            var t = a[end];
            a[end] = a[index];
            a[index] = t
        }
        return a
    }
    function codeClick(n, o) {
        var x = captchaCode.indexOf(n);
        if (x != -1) {
            captchaCode.splice(x, 1);
            o.style.background = "url(captcha/other/yes.png)";
            o.style.backgroundSize = 'cover';
            console.log("now" + captchaCode);
            if (captchaCode == "") {
               // alert("验证码通过");
                var tit = document.getElementById("tit").value;
                var content = document.getElementById("content").value;
                var contact = document.getElementById("contact").value;
                var check=tit+content+contact;
                if(check.trim()==""){
                    document.getElementById("captchaMsg").innerText = "无内容";
                    showCaptchaMsg();
                    hideCaptchaMsg();
                    return ;
                }
                $.ajax({
                    async: true,
                    url: "/php/insert_complain.php",
                    data: {
                        ip: returnCitySN["cip"],
                        city: returnCitySN["cname"],
                        tit: tit,
                        content: content,
                        contact: contact
                    },
                    type: "POST",
                    dataType: "TEXT",
                    success: function(a) {
                        console.log(a);
                        if (a == "ok") {
                            document.getElementById("captchaMsgpic").src="captcha/other/yes.png";
                            document.getElementById("captchaMsg").innerText = "已发送"
                        } else {
                            document.getElementById("captchaMsg").innerText = "未发送"
                        }
                    },
                    error: function(a) {
                        if (a == "ok") {
                             document.getElementById("captchaMsgpic").src="url(captcha/other/yes.png)";
                            document.getElementById("captchaMsg").innerText = "已发送"
                        } else {
                            document.getElementById("captchaMsg").innerText = "未发送"
                        }
                        console.log(a)
                    }
                });
                showCaptchaMsg();
                hideCaptchaMsg();
            }
        } else {
            o.className = "captchaPic wrongCode";
            setTimeout(function() {
                o.className = "captchaPic"
            }, 200);
            wrongCount++;
            if (wrongCount > 8) {
                for (var i = (Math.floor(Math.random() * 10)); i > 0; i--) {
                    if (confirm('您是机器人吗？\n Are you robot?')) {
                        window.close()
                    }
                }
            }
            newCaptcha()
        }
        console.log(captchaCode)
    }

    function showCaptchaMsg(){
        setTimeout(function() {
            document.getElementById("captchaSuccess").style.transform = "translateY(-400px)"
        }, 400);
    }
    function hideCaptchaMsg(){
        setTimeout(function() {
            document.getElementById("captchaMsgpic").src="captcha/other/no.jpg";
            document.getElementById("captchaSuccess").style.transform = "translateY(0px)";
            document.getElementById("captchaMsg").innerText = "---";
        }, 2000)
        setTimeout(function() {
            hideCaptcha();
        }, 2500)
        
    }
</script>
</html>